<template>
  <view class="adaptive-card" :class="{ 'small-screen': isSmallScreen, 'tiny-screen': isTinyScreen }">
    <view class="card-content">
      <view class="icon-wrapper">
        <view class="icon-placeholder"></view>
      </view>
      <view class="text-content">
        <text class="title-text">小红书</text>
        <text class="subtitle-text">查看详情</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'AdaptiveCard',
  data() {
    return {
      isSmallScreen: false,
      isTinyScreen: false
    }
  },
  mounted() {
    this.checkScreenSize();
    // 监听屏幕旋转
    uni.onWindowResize(() => {
      this.checkScreenSize();
    });
  },
  methods: {
    checkScreenSize() {
      const systemInfo = uni.getSystemInfoSync();
      const screenWidth = systemInfo.windowWidth;
      
      // 判断屏幕尺寸
      this.isTinyScreen = screenWidth < 600; // 超小屏
      this.isSmallScreen = screenWidth < 750 && screenWidth >= 600; // 小屏
    }
  }
}
</script>

<style scoped>
.adaptive-card {
  background: linear-gradient(135deg, #1f8fff 0%, #06b6d4 100%);
  border-radius: 20rpx;
  padding: 24rpx;
  margin: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
  overflow: visible !important; /* 强制允许内容完全显示 */
}

.card-content {
  display: flex;
  align-items: center;
  gap: 20rpx;
  width: 100%;
  min-width: 0;
  overflow: visible !important;
}

.icon-wrapper {
  flex-shrink: 0;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12rpx;
}

.text-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  overflow: visible !important; /* 强制确保文本不被截断 */
  width: auto !important; /* 强制宽度自适应 */
}

.title-text, .subtitle-text {
  color: white;
  font-weight: 600;
  white-space: nowrap;
  overflow: visible !important; /* 强制确保文本完全显示 */
  text-overflow: clip !important; /* 强制不显示省略号 */
  line-height: 1.2;
  width: fit-content !important; /* 强制宽度适应内容 */
  max-width: none !important; /* 强制不限制最大宽度 */
  display: block !important; /* 强制块级显示 */
}

.title-text {
  font-size: 32rpx;
}

.subtitle-text {
  font-size: 28rpx;
}

/* 小屏手机适配 */
.small-screen {
  padding: 20rpx;
  margin: 16rpx;
}

.small-screen .card-content {
  gap: 16rpx;
}

.small-screen .icon-wrapper {
  width: 50rpx;
  height: 50rpx;
}

.small-screen .title-text {
  font-size: 28rpx;
}

.small-screen .subtitle-text {
  font-size: 24rpx;
}

/* 超小屏手机适配 */
.tiny-screen {
  padding: 16rpx;
  margin: 12rpx;
}

.tiny-screen .card-content {
  gap: 12rpx;
}

.tiny-screen .icon-wrapper {
  width: 44rpx;
  height: 44rpx;
}

.tiny-screen .title-text {
  font-size: 24rpx;
}

.tiny-screen .subtitle-text {
  font-size: 20rpx;
}

/* 确保在极小屏幕上也能完整显示 */
@media screen and (max-width: 500rpx) {
  .adaptive-card {
    padding: 12rpx;
    margin: 8rpx;
  }
  
  .card-content {
    gap: 8rpx;
  }
  
  .icon-wrapper {
    width: 40rpx;
    height: 40rpx;
  }
  
  .title-text {
    font-size: 22rpx;
  }
  
  .subtitle-text {
    font-size: 18rpx;
  }
}

/* 强制确保文本不被截断 - 使用最高优先级 */
.text-content text {
  display: block !important;
  width: fit-content !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* 全局强制样式 */
.adaptive-card .card-content,
.adaptive-card .card-title,
.adaptive-card .card-body,
.adaptive-card .text,
.adaptive-card .content {
  overflow: visible !important;
}
</style>
